<template>
  <div>
    <!-- 导航 -->
    <xwBreadCrumb :items="crumbItems" />
    <!-- 搜索区域 -->
    <div class="search">
      <el-input @input="inputFn" v-model="kw" ref="kwRef" placeholder="请输入账号和昵称" clearable />
      <el-button type="primary" @click="onSearch" icon="el-icon-search">搜索一下</el-button>
      <!-- <el-button @click="visible = true" type="success" icon="el-icon-plus">添加用户</el-button> -->
      <!-- <el-button :disabled="disabled" @click="deleteAllUser" type="danger" icon="el-icon-delete"
        >选中删除用户</el-button
      > -->
      <Btn action="adduser" icon="el-icon-plus" type="success" @actionFn="visible = true">添加用户</Btn>
      <Btn action="deleteAll" icon="el-icon-delete" type="danger" :disabled="disabled" @actionFn="deleteAllUser"
        >选中删除用户</Btn
      >
      <Btn action="exportExcel" type="primary" :disabled="disabled" @actionFn="exportExcel"
        >选中用户导出为excel文件</Btn
      >
      <Btn action="exportExcel" type="primary" @actionFn="exportAllExcel">导出全部用户数据为excel</Btn>
      <Btn action="importExcel" type="primary" @actionFn="importExcel">导入用户数据</Btn>
    </div>
    <!-- 表单数据 -->
    <div class="tableBox">
      <userTable
        :key="$route.fullPath"
        :tableData="tableData"
        :deleteTableData="deleteTableData"
        :total="total"
        :deleteUserIds.sync="deleteUserIds"
        :loadData="loadData"
        @handleEdit="handleEdit"
      />
    </div>

    <!-- 弹出层 -->
    <userForm :visible.sync="visible" ref="userFormRef" />

    <!-- 导入用户excel弹层 -->
    <importUserDialog :excelVisible.sync="excelVisible" />
  </div>
</template>

<script>
import xwBreadCrumb from '@/components/xwBreadCrumb'
import userForm from './ui/userForm.vue'
import userTable from './ui/userTable.vue'
import importUserDialog from './ui/importUserDialog.vue'
import { getUserListApi, deleteUserApi, showUserInfoApi, exportAllExcelApi } from '@/api/userApi'
import { errorMsg } from '@/utils/msg'
import Btn from '@/components/Btn'
import _ from 'lodash'
import { setJsonFieldToExcelField } from '@/utils/tools'
import siteConfig from '@/config/site'
// 生成excel json生成excel
import { writeFile, readFile, utils } from 'xlsx'
export default {
  components: {
    xwBreadCrumb,
    userForm,
    userTable,
    importUserDialog,
    Btn
  },
  data() {
    return {
      // 决定弹出层是否显示
      visible: false,
      excelVisible: false,
      disabled: true,
      crumbItems: ['用户管理', '用户列表'],
      kw: '',
      tableData: [],
      deleteUserIds: [],
      total: 0,
      userInfo: null
    }
  },
  async created() {
    let ret = await this.loadData(1)
    let page = this.$route.query.page || 1

    // 知道总记录数 Math.ceil(100/10)
    if (page >= Math.ceil(this.total / 10)) page = Math.ceil(this.total / 10)
    if (page <= 1) page = 1
    await this.loadData(page)
  },
  watch: {
    deleteUserIds(nv) {
      this.disabled = nv.length === 0 ? true : false
    }
  },
  methods: {
    // 输入事件
    inputFn: _.throttle(function (value) {
      console.log(value)
    }, 300),
    // 点击了修改
    async handleEdit(id) {
      // 根据用户的id，得到当前用户的记录
      let ret = await showUserInfoApi(id)
      if (ret.code == 0) {
        // 得到的数据赋值到对应的数据源中
        this.userInfo = ret.data
        // 弹出层展示
        this.visible = true
        // 得到当前自定义组件实例
        // 数据中有一个用户id号字段，只有修改的时候才有
        this.$refs['userFormRef'].form = this.userInfo
      }
    },
    // 单个删除这块，我没有写网络请求，请你们补上
    deleteTableData(index) {
      this.tableData.splice(index, 1)
      // 如果当前页中没有更多的记录时，重新请求一次
      // 如果你删除是第1页，则没有时，请求的还是第1页
      // 如果你大于1，则在没有时，page-1
      if (this.tableData.length == 0) {
        let page = this.$route.query.page || 1
        // page为第1页
        if (page == 1) this.loadData()
        else this.loadData(page - 1)
      }
    },
    async loadData(page = 1) {
      let ret = await getUserListApi(page)
      // this.tableData = ret.data.users
      // this.total = ret.data.total
      this.tableData = ret.users
      this.total = ret.total
    },
    // 全选删除用户
    deleteAllUser() {
      // console.log(this.deleteUserIds)
      // 删除之前要确认
      this.$confirm('您确定要删除本页数据吗？', '删除确认')
        .then(() => {
          // throw new Error()
          return deleteUserApi(this.deleteUserIds)
        })
        .then(ret => {
          if (ret.code === 0) {
            if (this.deleteUserIds.length == 10) {
              this.tableData = []
            } else {
              this.tableData = this.tableData.filter(({ id }) => !this.deleteUserIds.includes(id))
            }
            if (this.tableData.length == 0) {
              if (this.tableData.length == 0) {
                let page = this.$route.query.page || 1
                // page为第1页
                if (page == 1) this.loadData()
                else {
                  this.loadData(page - 1)
                  page--
                }
                this.$router.replace(`/admin/user?page=${page}`)
              }
            }
          }
        })
        .catch(() => {})
    },
    // 标准写法  一般用于高阶函数的包裹使用
    // xx:function(){}
    // 搜索
    onSearch: _.debounce(function () {
      // 搜索输入框中一定要有数据，才能搜索
      if (/^\s*$/.test(this.kw)) {
        errorMsg('输入的内容不能为空', () => {
          this.kw = ''
          // 了解不用
          // this.$refs['kwRef'].$el.childNodes[1].focus()
          this.$refs['kwRef'].focus()
        })
      }
      // 敏感字符串要过滤
      // iframe img script
      this.kw = this.kw.replace(/(<|>|iframe|img|script)/gi, '')
      console.log(this.kw)
    }, 300),
    // 得到当前你所选中的用户列表
    exportExcel() {
      // 得到你所选中的用户列表,请求服务器得到用户列表信息
      // console.log(this.deleteUserIds);
      // console.log(this.tableData);
      // 生成对应的excel文件
      let data = setJsonFieldToExcelField(siteConfig.exportUserFieldName, this.tableData)
      // json转为sheet工作单元
      let sheet = utils.json_to_sheet(data)
      // 工作薄
      let workBook = utils.book_new()
      // 工作单元添加到工作薄中
      utils.book_append_sheet(workBook, sheet, '用户管理')
      // 生成xlsx
      writeFile(workBook, '用户管理.xlsx')
    },
    // 导出全部的用户数据为excel,一般都为提前在后端生成后好,前端直接下载即可
    exportAllExcel() {
      // 发起网络请求,返回xlsx不是一个json字符中或文本
      exportAllExcelApi()
    },
    importExcel() {
      this.excelVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.search {
  margin-top: 20px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
  .el-input {
    width: 300px;
    margin-right: 20px;
  }
}
</style>
